/*
 * @文件描述: Modal弹窗
 * @公司: 山东大学信息学院
 * @作者: 李洪文
 * @Date: 2019-11-12 20:03:47
 * @LastEditors: 李洪文
 * @LastEditTime: 2019-11-12 21:18:37
 */
import React from 'react';
import { View, Text, ScrollView, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import Modal from 'react-native-modal';
import { size, colors } from '@/config';

const { px } = size;

interface ModalProps {
  style?: StyleProp<ViewStyle>;
  modalTitle?: string;
  visible: boolean;
  textContent: React.ReactElement;
  footer?: React.ReactElement;
  cancel: () => void;
}

const ModalFrame: React.FC<ModalProps> = props => {
  const { style, modalTitle, visible, textContent, cancel, footer } = props;
  return (
    <Modal style={style} isVisible={visible} onBackdropPress={cancel}>
      <View style={styles.modal}>
        {modalTitle && <Text style={styles.modalTitle}>{modalTitle}</Text>}
        <ScrollView style={styles.scrollView}>
          <View style={styles.textContent}>{textContent}</View>
        </ScrollView>
        {footer}
      </View>
    </Modal>
  );
};

export default ModalFrame;

const { titleBg, white } = colors;
const styles = StyleSheet.create({
  modal: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalTitle: {
    height: px(48),
    lineHeight: px(48),
    width: '100%',
    backgroundColor: titleBg,
    textAlign: 'center',
    fontSize: px(18),
  },
  scrollView: {
    width: '100%',
    backgroundColor: white,
  },
  textContent: {
    paddingVertical: px(15),
  },
});
